<template>
  <div>
    <!-- 一体杠查询 -->
    <el-form v-auth-dir="`pole:info:list`" :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="一体杆名称：">
        <el-input v-model="searchForm.poleName" />
      </el-form-item>
      <el-form-item label="一体杆编号：">
        <el-input v-model="searchForm.poleNumber" />
      </el-form-item>
      <el-form-item label="运行状态：">
        <el-select v-model="searchForm.poleStatus">
          <el-option label="全部" value="2" />
          <el-option label="正常" value="0" />
          <el-option label="异常" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearchFn">查询</el-button>
      </el-form-item>
    </el-form>
    <hr>
    <!-- 功能按钮 -->
    <el-row class="btn-container">
      <el-button v-auth-dir="`pole:info:add_edit`" type="primary" @click="openDialog()">添加一体杆</el-button>
      <el-button v-auth-dir="`pole:info:remove`" @click="delMorePoleFn">批量删除</el-button>
    </el-row>
    <!-- 表单区域 -->
    <el-table
      :data="poleDataList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="index"
        label="序号"
        width="120"
      />
      <el-table-column
        prop="poleName"
        label="一体杆名称"
        width="120"
      />
      <el-table-column
        prop="poleNumber"
        label="一体杆编号"
        show-overflow-tooltip
      />
      <el-table-column
        prop="poleIp"
        label="一体杆IP"
        show-overflow-tooltip
      />
      <el-table-column
        prop="areaName"
        label="安装区域"
        show-overflow-tooltip
      />
      <el-table-column
        prop="poleType"
        label="一体杆类型"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ poleType[scope.row.poleType] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="poleStatus"
        label="运行状态"
      >
        <template #default="scope">
          {{ poleStatus[scope.row.poleStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-button
            v-auth-dir="`pole:info:add_edit`"
            size="mini"
            type="text"
            @click="openDialog(scope.row)"
          >编辑</el-button>
          <el-button
            v-auth-dir="`pole:info:remove`"
            size="mini"
            type="text"
            @click="deleteSinglePoleFn(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :page-size="searchForm.pageSize"
        :total="total"
        @current-change="handlePage"
      />
    </div>
    <!-- 添加一体杆弹窗 -->
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      width="580px"
      @close="closeBuildingFn"
    >
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="一体杆名称" prop="poleName">
            <el-input v-model="addForm.poleName" />
          </el-form-item>
          <el-form-item label="一体杆编号" prop="poleNumber">
            <el-input v-model="addForm.poleNumber" />
          </el-form-item>
          <el-form-item label="一体杆IP" prop="poleIp">
            <el-input v-model="addForm.poleIp" />
          </el-form-item>
          <el-form-item label="关联区域" prop="areaId" class="full-width-item">
            <template>
              <el-select v-model="addForm.areaId" class="full-width-select">
                <el-option
                  v-for="item in areaList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="一体杆类型" prop="poleType">
            <template>
              <el-select v-model="addForm.poleType" class="full-width-select">
                <el-option
                  v-for="item in type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="publicPoleFn">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getPoleListAPI, editPoleAPI, delPoleAPI, createPoleAPI } from '@/apis/pole'
import { getAreaListAPI } from '@/apis/area'
import { validIP } from '@/utils/validate'
export default {
  data() {
    return {
      searchForm: {
        poleName: '',
        poleNumber: '',
        poleStatus: '2',
        page: 1,
        pageSize: 2
      },
      poleDataList: [], // 一体杆列表 {} TODO =======>>>>>>>>>>>
      poleType: {
        entrance: '入口',
        export: '出口',
        center: '中间'
      },
      poleStatus: {
        '0': '正常',
        '1': '异常'
      },
      title: '添加一体杆', // 对话框标题
      dialogVisible: false, // 弹窗控制
      addForm: {
        poleName: '',
        poleNumber: '',
        poleIp: '',
        areaId: '',
        poleType: ''
      },
      addFormRules: {
        poleName: [
          { required: true, message: '请输入一体杆的名称', trigger: 'blur' }
        ],
        poleNumber: [
          { required: true, message: '请输入一体杆编号', trigger: 'blur' }
        ],
        poleIp: [
          { required: true, message: '请输入一体杆IP', trigger: 'blur' },
          { validator: this.validIPFn, trigger: 'blur' }
        ],
        areaId: [
          { required: true, message: '请选择一体杆管理的区域', trigger: 'blur' }
        ],
        poleType: [
          { required: true, message: '请选择一体杆的类型', trigger: 'blur' }
        ]
      },
      type: [
        { label: '入口', value: 'entrance' },
        { label: '出口', value: 'export' }
      ],
      areaList: [],
      selectedList: [],
      total: 0
    }
  },
  created() {
    this.getPoleList()
  },
  methods: {
    onSearchFn() {
      this.getPoleList()
    },
    // 获取一体杆列表
    async getPoleList() {
      const res = await getPoleListAPI(this.searchForm)
      console.log(res)
      this.poleDataList = res.data.rows
      this.total = res.data.total
    },
    // 关闭弹窗控制
    async closeBuildingFn() {
      this.dialogVisible = false
      await this.$refs.addForm.resetFields()
    },
    // 打开弹窗
    openDialog(row) {
      if (row) {
        this.title = '编辑一体杆'
        const { id, poleName, poleNumber, poleIp, areaId, poleType } = row
        this.addForm = { id, poleName, poleNumber, poleIp, areaId, poleType }
      } else {
        this.title = '添加一体杆'
        this.addForm.poleName = ''
        this.addForm.poleNumber = ''
        this.addForm.poleIp = ''
        this.addForm.areaId = ''
        this.addForm.poleType = ''
        if ((typeof this.addForm) === 'number') {
          delete this.addForm.id
          console.log(typeof this.addForm.id)
        }
        console.log(this.addForm.id)
      }
      this.getAreaList()
      this.dialogVisible = true
    },
    // 添加和编辑一体杆接口
    async publicPoleFn() {
      await this.$refs.addForm.validate()
      let res = ''
      if (this.title === '编辑一体杆') {
        // 编辑逻辑
        res = await editPoleAPI(this.addForm)
      } else {
        // 添加逻辑
        res = await createPoleAPI(this.addForm)
      }
      this.$message({
        type: 'success',
        message: res.msg
      })
      this.dialogVisible = false
      this.getPoleList()
    },
    // 获取区域管理列表
    async getAreaList() {
      const res = await getAreaListAPI(this.params)
      console.log(res)
      this.areaList = res.data.rows.map(item => ({
        areaId: item.id,
        areaName: item.areaName
      }))
    },
    handleSelectionChange(values) {
      // console.log(x)
      this.selectedList = values
    },
    // 删除一体杆
    async delMorePoleFn() {
      // 判断是否选择内容
      if (this.selectedList.length <= 0) {
        this.$message({
          type: 'warning',
          message: '没有选中内容，请重新选择'
        })
        return
      }
      // 批量删除
      this.$confirm('您确定要删除选择的信息吗？', '提示：', {
        type: 'warning'
      }).then(async() => {
        const delList = this.selectedList.map(item => item.id)
        console.log(delList)
        const res = await delPoleAPI(delList)
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.getPoleList()
      }).catch(() => {
        this.$message('取消操作')
      })
    },
    // 删除单条信息
    deleteSinglePoleFn(id) {
      this.$confirm('您确定要删除这条信息吗？', '提示：', {
        type: 'warning',
        confirmButtonText: '删除',
        cancelButtonText: '取消'
      }).then(async() => {
        const res = await delPoleAPI(id)
        this.getPoleList()
        this.$message({
          type: 'success',
          message: res.msg
        })
      }).catch(() => {
        this.message('取消操作')
      })
    },
    // 校验ip地址
    validIPFn(rule, value, callback) {
      if (validIP(value)) callback()
      else callback(new Error('请输入正确的IP号'))
    },
    // 下一页
    handlePage(nextPage) {
      console.log(nextPage)
      this.searchForm.page = nextPage
      this.getPoleList()
    }
  }
}
</script>

<style lang="postcss" scoped>
.btn-container{
  margin: 15px 0;
}
.full-width-item{
  width: 100%;
}
.full-width-select{
  width: 100%;
}
.page-container {
  padding: 4px 0px;
  text-align: right;
}
</style>
